<template>
    <div class="login_container">
        <!--登录盒子-->
        <div class="login_box">
            <!--图片logo区域-->
            <div class="avatar_box">
                <img src="@/assets/images/logo.png">
            </div>
            <!--登录表单区域  :rules="rules"  表单校验对象 -->
            <el-form ref="formRef" class="login_form" :model="form" :rules="formRules">
                <!--用户名  prop 指定验证规则-->
                <el-form-item prop="username">
                    <el-input prefix-icon="el-icon-user" v-model="form.username" placeholder="请输入用户名"></el-input>
                </el-form-item>
                <!--密码-->
                <el-form-item prop="password">
                    <el-input prefix-icon="el-icon-lock" type="password" v-model="form.password"
                              placeholder="请输入密码"></el-input>
                </el-form-item>
                <!--验证码-->
                <el-form-item prop="code">
                    <el-input prefix-icon="el-icon-key" v-model="form.code" placeholder="点击图片切换验证码"
                              style="width: 300px; margin-right: 10px"></el-input>
                    <img  :src="captchaData" alt="" width="100" height="40" @click="changeCaptcha" style="float: right;">
                </el-form-item>
                <!--按钮区域-->
                <el-form-item>
                    <el-button type="primary" class="btn"  @click="formSubmit">登录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>

</template>

<script>
import {getCaptcha, login} from "@/api/user";

export default {
    name: "LoginView",
    data(){
        return{
            captchaData:'',
            form:{
                username:'admin',
                password:'123456',
                code:'',
                uuid:''
            },
            formRules:{
                username: [
                    {required: true, message: '请输入用户名', trigger: 'blur'},
                    {min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur'}
                ],
                password: [
                    {required: true, message: '请输入密码', trigger: 'blur'},
                    {min: 6, max: 15, message: '长度在6 到 15 个字符', trigger: 'blur'}
                ],
                code: [
                    {required: true, message: '请输入验证码', trigger: 'blur'}
                ]
            }
        }
    },
    methods:{
        // 切换验证码
        changeCaptcha(){
            getCaptcha().then(response=>{
                if (response.code==0){
                    let {uuid,imageBase64} = response.data
                    this.form.uuid = uuid
                    this.captchaData = 'data:image/jpeg;base64,'+imageBase64
                }
            })
        },
        formSubmit(){
            // 发送认证请求
            this.$refs.formRef.validate(val=>{
                if (val){
                    login(this.form).then(response=>{
                        if (response.code==0){
                            // 获取token并保存
                            sessionStorage.setItem("token",response.data.token)
                            // 获取用户昵称 用户主页用户名展示
                            sessionStorage.setItem("nickName",response.data.nickName)
                            this.$message({
                                type:'success',
                                message:response.message,
                                onClose:()=>{
                                    // 跳转路由
                                    this.$router.push("/home").catch(error=>console.log(error))
                                }
                            })
                        }
                    })
                }
            })
        }
    },
    created() {
        // 发送验证码请求  Promise
        getCaptcha().then(response=>{
           if (response.code==0){
               let {uuid,imageBase64} = response.data
               this.form.uuid = uuid
               this.captchaData = 'data:image/jpeg;base64,'+imageBase64
           }
        })
    }
}
</script>

<style scoped>
.login_container {
    background-color: rgb(26, 160, 148);
    height: 100vh;
}

.login_box {
    width: 450px;
    height: 380px;
    background-color: #fff;
    border-radius: 30px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 15px #fff;
}

.login_box > .avatar_box {
    height: 70px;
    width: 70px;
    border: 1px solid #eee;
    border-radius: 50%;
    padding: 10px;
    box-shadow: 2px 2px 20px #2b4b6b;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
}

.avatar_box > img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    transform: scale(1.3);
}

.avatar_box:hover {
    transform: translate(-50%, -50%) rotate(360deg);
    transition: transform 0.5s linear;
    cursor: pointer;
}

.btn {
    width: 100%;
}

.login_form {
    position: absolute;
    bottom: 30px;
    border-bottom: 0;
    box-sizing: border-box;
    width: 100%;
    padding: 0 20px;
}
</style>